import React from 'react';
import { motion } from 'framer-motion';
import { Button } from 'antd';

// 动画按钮组件，支持多种法律风格的按钮
const AnimatedButton = ({ 
  children, 
  type = 'primary',
  style = 'default',
  onClick,
  icon,
  size = 'large',
  ...props 
}) => {
  
  // 不同风格的按钮配置
  const buttonStyles = {
    default: {
      base: {
        borderRadius: '4px',
        transition: 'all 0.3s',
        fontFamily: '"Cinzel", "Noto Serif SC", serif',
        letterSpacing: '1px',
        boxShadow: '0 4px 10px rgba(0, 0, 0, 0.1)',
        fontSize: size === 'large' ? '18px' : '14px',
      },
      hover: { 
        scale: 1.03, 
        boxShadow: '0 6px 15px rgba(0, 0, 0, 0.15)' 
      },
      tap: { 
        scale: 0.97 
      },
      whileTap: { 
        backgroundColor: type === 'primary' ? '#8b0000' : '#f8f0dd',
        borderColor: type === 'primary' ? '#8b0000' : '#a67c00'
      }
    },
    scroll: {
      base: {
        borderRadius: '4px',
        backgroundImage: 'linear-gradient(to bottom, #f8f0dd, #e0d1ae)',
        border: '1px solid #a67c00',
        color: '#1a2b48',
        fontFamily: '"Cinzel", "Noto Serif SC", serif',
        textShadow: '0 1px 1px rgba(255, 255, 255, 0.5)',
        padding: size === 'large' ? '12px 24px' : '8px 16px',
        position: 'relative',
        overflow: 'hidden',
        fontSize: size === 'large' ? '18px' : '14px',
      },
      hover: { 
        y: -2,
        boxShadow: '0 6px 12px rgba(0, 0, 0, 0.1)'
      },
      tap: { 
        y: 1,
        boxShadow: 'none'
      },
      whileTap: { 
        backgroundColor: '#e0d1ae',
        borderColor: '#8b0000'
      }
    },
    legal: {
      base: {
        borderRadius: '2px',
        background: 'linear-gradient(135deg, #1a2b48, #2d4a77)',
        border: '1px solid #a67c00',
        color: '#f8f0dd',
        fontFamily: '"Cinzel", "Noto Serif SC", serif',
        letterSpacing: '1px',
        padding: size === 'large' ? '10px 24px' : '6px 16px',
        boxShadow: '0 4px 12px rgba(26, 43, 72, 0.3)',
        position: 'relative',
        fontSize: size === 'large' ? '18px' : '14px',
      },
      hover: { 
        boxShadow: '0 6px 16px rgba(26, 43, 72, 0.4)',
        y: -2
      },
      tap: { 
        boxShadow: '0 2px 8px rgba(26, 43, 72, 0.2)',
        y: 1
      },
      whileTap: { 
        backgroundColor: '#2d4a77',
        borderColor: '#f8f0dd'
      }
    },
    adventure: {
      base: {
        borderRadius: '4px',
        background: 'linear-gradient(135deg, #5c8374, #3a5248)',
        border: '1px solid #a67c00',
        color: '#f8f0dd',
        fontFamily: '"Cinzel", "Noto Serif SC", serif',
        letterSpacing: '1px',
        padding: size === 'large' ? '10px 24px' : '6px 16px',
        boxShadow: '0 4px 12px rgba(92, 131, 116, 0.3)',
        fontSize: size === 'large' ? '18px' : '14px',
      },
      hover: { 
        boxShadow: '0 6px 16px rgba(92, 131, 116, 0.5)',
        scale: 1.03
      },
      tap: { 
        boxShadow: '0 2px 8px rgba(92, 131, 116, 0.2)',
        scale: 0.97
      },
      whileTap: { 
        backgroundColor: '#3a5248',
        borderColor: '#f8f0dd'
      }
    },
    parchment: {
      base: {
        borderRadius: '0',
        backgroundColor: '#f8f0dd',
        border: '2px solid #a67c00',
        color: '#1a2b48',
        fontFamily: '"Cinzel", "Noto Serif SC", serif',
        padding: size === 'large' ? '10px 24px' : '6px 16px',
        position: 'relative',
        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
        fontSize: size === 'large' ? '18px' : '14px',
      },
      hover: { 
        boxShadow: '0 6px 12px rgba(0, 0, 0, 0.15)',
        y: -2
      },
      tap: { 
        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
        y: 1
      },
      whileTap: { 
        backgroundColor: '#e0d1ae',
        borderColor: '#8b0000'
      }
    }
  };

  // 获取当前风格的按钮样式
  const currentStyle = buttonStyles[style] || buttonStyles.default;
  
  return (
    <motion.div
      initial="initial"
      whileHover="hover"
      whileTap="tap"
      variants={{
        initial: { scale: 1 },
        hover: currentStyle.hover,
        tap: currentStyle.tap
      }}
      style={{ display: 'inline-block' }}
    >
      <Button
        type={type}
        onClick={onClick}
        icon={icon}
        size={size}
        {...props}
        style={{
          ...currentStyle.base,
          ...props.style
        }}
      >
        <motion.span
          whileTap={currentStyle.whileTap}
          style={{ 
            display: 'inline-block',
            width: '100%'
          }}
        >
          {children}
        </motion.span>
      </Button>
    </motion.div>
  );
};

export default AnimatedButton; 